span.arrow {

    &::before {
        content: "";
        position: absolute;
        top: 60%;
        right: 8%;
        width: 53%;
        height: 2px;
        margin-top: -2px;
        background: #15232c;
        transform: rotate(-45deg);
        transition: all .1s;
        pointer-events: none;
    }

    &::after {
        left: 8%;
        transform: rotate(45deg);
        content: "";
        position: absolute;
        top: 60%;
        right: 8%;
        width: 53%;
        height: 2px;
        margin-top: -2px;
        background: #15232c;
        transform: rotate(45deg);
        transition: all .1s;
        pointer-events: none;
    }

}

span.avatar {
    background: url();
    background-size: cover;
    img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
}

.icon-success {

    .animate {
        width:100px;
        height:100px;
        border:5px solid rgb(165,220,134);
        border-radius:50%;
        margin:50px auto 20px;
        position:relative;


        .sa-line {
            height:5px;
            background-color:rgb(165,220,134);
            display:block;
            border-radius:2px;
            position:absolute;
            z-index:101;
        }
        .sa-tip {
            width:25px;
            left:18px;
            top:47px;
            -webkit-transform:rotate(45deg);
            transform:rotate(45deg);
            animation:icon_success_success_tip 0.75s;
            -webkit-animation:icon_success_success_tip 0.75s;
        }
        .sa-long {
            width:47px;
            right:12px;
            top:40px;
            -webkit-transform:rotate(-45deg);
            transform:rotate(-45deg);
            animation:icon_success_success_long 0.75s;
            -webkit-animation:icon_success_success_long 0.75s;
        }
        .animate-before {
            position:absolute;
            overflow:hidden;
            z-index:100;
            left:-10px;
            top:10px;
            width:60px;
            height:120px;
            background:rgba(255,255,255,1);
            -webkit-transform:rotate(-45deg);
            -moz-transform:rotate(-45deg);
            -ms-transform:rotate(-45deg);
            -o-transform:rotate(-45deg);
            transform:rotate(-45deg);
        }
        .animate-before .circle {
            position:absolute;
            left:16px;
            top:10px;
            width:100px;
            height:100px;
            border:5px solid rgba(165,220,134,0.5);
            border-radius:50%;
        }
        
        &:after {
            content:'';
            position:absolute;
            z-index:99;
            left:41px;
            top:-11px;
            width:60px;
            height:120px;
            background:rgba(255,255,255,0.5);
            -webkit-transform:rotate(-45deg);
            -moz-transform:rotate(-45deg);
            -ms-transform:rotate(-45deg);
            -o-transform:rotate(-45deg);
            transform:rotate(-45deg);
            transform-origin:0px 60px;
            animation:icon_success_rotate 0.75s;
            -webkit-animation:icon_success_rotate 0.75s;
        }

    }

}

@keyframes icon_success_rotate {
	from {
        -webkit-transform:rotate(-45deg);
        -moz-transform:rotate(-45deg);
        -ms-transform:rotate(-45deg);
        -o-transform:rotate(-45deg);
        transform:rotate(-45deg);
    }
    to {
        -webkit-transform:rotate(-405deg);
        -moz-transform:rotate(-405deg);
        -ms-transform:rotate(-405deg);
        -o-transform:rotate(-405deg);
        transform:rotate(-405deg);
    }
}

@keyframes icon_success_success_long {
	0% {
        width:0;
        right:30px;
        top:40px;
    }
    65% {
        width:0;
        right:45px;
        top:42px;
    }
    84% {
        width:55px;
        right:0px;
        top:37px;
    }
    100% {
        width:47px;
        right:12px;
        top:40px;
    }
}

@keyframes  icon_success_success_tip {
	0% {
        width:0;
        left:8px;
        top:8px;
    }
    54% {
        width:0;
        left:8px;
        top:8px;
    }
    70% {
        width:50px;
        left:3px;
        top:30px;
    }
    84% {
        width:17px;
        left:30px;
        top:47px;
    }
    100% {
        width:25px;
        left:18px;
        top:47px;
    }
}

.icon {

    svg {
        width: 100%;
        height: 100%;
    }

}